{% extends 'layout.html' %}


{% block head %}

{% endblock %}


{% block main %}
<div class="row justify-content-center align-items-center">
    <div class="col-10">
        <div class="d-flex">
            <img src="https://pic2.zhimg.com/v2-e8b4f9dff1e3c3170185584c925d388a_l.jpg?source=1940ef5c" alt="头像">
            <div class="ms-3" style="width:8rem; position: relative;">
                <h3>{{ user.username}}</h3>
                <p class="mb-0" style="position: absolute; bottom:0px; left:0px;">余额：&yen;<span
                        class="h3 mb-0 text-danger">{{user.balance}}</span></p>
            </div>
        </div>
        <hr />

        <h3>我的书架</h3>
        {% for trade in trades %}
        <div class="d-flex my-3">
            <img class="cover" src="{{trade.book.cover}}" alt="封面" />
            <div class="ms-2">
                <a href="/book/{{trade.book.id}}/" class="h3">{{ trade.book.name }}</a>
                <p class="my-4"> <span class="text-muted">作者：</span> {{trade.book.author.username}}</p>
                <button class="btn btn-success">已购买</button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}